<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div @click="testState">
      测试globalState
    </div>
    <div @click="toComponent">
      去第二个工程
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import actions from '../golbalState'
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  mounted() {
    // const value = localStorage.getItem('key')
    // console.log('得到的值=', value)
    // localStorage.setItem('key','123')
    actions.onGlobalStateChange((state, prevState) => {
      // state: 变更后的状态; prevState: 变更前的状态
        console.log("主应用观察者：token 改变前的值为 ", prevState);
        console.log("主应用观察者：登录状态发生改变，改变后的 token 的值为 ", state);
    })
  },
  methods:{
    toComponent(){
      this.$router.push('/vue')
    },
    testState(){

      actions.setGlobalState({token: '设置的值' ,token2:'第二个值'})
    }
  }
};
</script>
